<template>
  <!-- 推荐组件 -->
  <div class="recommend">
    <div class="re_img" style="margin:8px 0 8px 0;">
      <img
        src="http://img11.360buyimg.com/jdphoto/jfs/t1/31601/22/15554/14040/5cc2a86fEbdb1098b/88174b36f85283b6.png"
        alt=""
      />
    </div>
    <!-- 推荐部分 -->
    <div class="re_detail">
      <ul>
        <li v-for="item of products" :key="item.id">
          <a href="#">
            <div class="product">
              <img :src="item.product_img" alt="" />
            </div>
            <span class="product_text">{{ item.product_desc }}</span>
            <p class="similar-product-info">
              <span class="similar-product-price">¥&nbsp;</span>
              <span class="big_price">{{ item.product_price }}</span>
              <span class="new-product" v-if="item.is_hot === 1">热款</span>
              <span class="new-product" v-else-if="item.is_new === 1"
                >新款</span
              >
              <span class="guess-btn">看相似</span>
            </p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 促销部分 -->
    <div class="promotion_detail">
      <div class="promotion_title">
        <van-row>
          <van-col span="20" style="font-size:17px;">
            <p class="re_product">促销单品</p>
            <span class="re_content">库存商品优惠促销活动</span>
          </van-col>
          <van-col span="4">
            <div class="more">
              <a href="#"
                >更多
                <van-icon name="arrow" class="arrow"></van-icon>
              </a>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="promotion_item" v-for="item in promotion" :key="item.id">
        <van-row gutter="15">
          <van-col span="8">
            <img :src="item.product_img" class="pro_item_img" alt="" />
          </van-col>
          <van-col span="16">
            <div class="pro_item_info">
              <p class="info_title">{{ item.product_desc }}</p>
              <div class="key_words">
                <span
                  v-for="(feature, index) of item.product_feature"
                  :key="index"
                  >{{ feature }}
                </span>
              </div>
              <p class="price">¥ {{ item.product_price }}</p>
              <p class="store_name">{{ item.infoshopName }}</p>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { getRecommend } from "@/api/api";
import { getSale } from '@/api/api';

export default {
  name: "HomeRecommend",
  data() {
    return {
      products: [],
      promotion: [],
    };
  },
  mounted() {
    Promise.all([getRecommend(), getSale()]).then((values) => {
      this.products = values[0].data;
      let sale = values[1].data;
      this.promotion = sale.map(item => {
        let featureArr = [];
        if (item.product_feature.indexOf(',')) {
          featureArr = item.product_feature.split(',');
          item.product_feature = featureArr;
          return item;
        }
      });
    }).catch(err => {
      console.log(err);
    });
  },
  components: {}
};
</script>

<style scoped lang="stylus">
.recommend
  background #fff

  .re_img
    margin-top 8px;
    margin-bottom 8px;

  img
    width 100%;

.re_detail
  margin-left 0.3rem;
  margin-right 0.3rem;
  overflow hidden;

  ul
    flex()
    justify-content space-between;
    flex-wrap wrap;

    li
      width 49%;
      background white;
      margin-top 5px;
      box-sizing border-box;

      &:nth-child(1), &:nth-child(2)
        margin-top 0;

      .product_text
        box-sizing border-box;
        font-size 13px;
        camp(2)
        color #232326;
        margin-top 10px;
        line-height 16px;
        padding 0 1px;

      .similar-product-info
        padding 0 2px;
        overflow hidden;
        position relative;
        font-size 13px;
        height 26px;

        .similar-product-price
          color #f23030;
          display inline-block;
          height 25px;
          line-height 25px;
          float left;

        .big_price
          font-size 16px;
          height 25px;
          line-height 25px;
          color #f23030;
          float left;

        .new-product
          border 1px solid #e4393c;
          color #e4393c;
          font-size 10px;
          padding 2px 3px 1px 3px;
          margin 3.5px 0px 0 5px;
          float left;
          height 12px;
          line-height 12px;

        .guess-btn
          display block;
          position absolute;
          top 0;
          right 2px;
          text-align center;
          color #686868;
          font-size 12px;
          width 49px;
          height 20px;
          line-height 20px;
          border: 1px solid #cccccc;

      img
        width 100%;
        height 150px;

.promotion_detail
  margin 0.3rem 0.3rem 0 0.3rem

  .promotion_title
    .re_product
      font-size 15px
      font-weight bold
      color #000000

    .re_content
      font-size 10px
      color #999999

    .more
      font-size 14px
      color #000000
      margin-top 10px
      float: right;

      a
        vertical-align middle
        color #000000

        .arrow
          vertical-align: bottom;
          font-size 13px

.promotion_item
  margin-top .2rem
  background #fff

  .pro_item_img
    width 100%

  .pro_item_info

    .info_title
      camp(2)
      font-size 12px
      word-break break-all
      margin-top 14px
      color #333
      line-height 1.36

    .key_words
      flex-direction row
      font-size 13px
      height 15px
      line-height 15px
      margin 8px 0 5px 0

      span
        padding 0 5px;
        border-radius 1px;
        color #999;
        background-color #ecececa3
        margin-right 3px

    .price
      color #e93b3d
      font-size 16px
      margin 15px 0 3px 0

    .store_name
      color #999999
      font-size 12px
</style>
